<template>
  <div :style="conheight">
    <el-scrollbar :style="conheight">
      <el-tabs closable
               v-model="editableTabsValue"
               type="border-card"
               @tab-remove="removeTab">
        <el-tab-pane label="系统作业"
                     name="-1">
          <select-job @newTabPanel="createNewTabPanel"></select-job>
        </el-tab-pane>
        <el-tab-pane v-for="(item, index) in myJobList"
                     :key="item.id"
                     :name="''+item.id">
          <span slot="label"><i v-if="item.iconClass"
               :class="item.iconClass"></i>{{item.jobName}}</span>

          <job-group-executor :myJob="item"
                              v-if="item.jobType == '0' ||item.jobType == '2'"></job-group-executor>
          <job-executor :myJob="item"
                        v-else></job-executor>
        </el-tab-pane>

      </el-tabs>
    </el-scrollbar>
  </div>
</template>
<script>
import SelectJob from "./component/SelectJob";
import JobExecutor from "./component/JobExecutor";
import JobGroupExecutor from "./component/JobGroupExecutor";
import { formatDate } from "@/utils/date";
import { hasPermission, getEntries, getLabel } from "@/utils/dict";
import { apiJobList } from "@/api/monitor";


export default {
  components: { JobExecutor, SelectJob, JobGroupExecutor },
  name: "MonitorTask",

  data() {
    return {
      myJobList: [],
      editableTabsValue: '-1',
      active: 0,
      radioOption: '执行计划',
      cfgJobList: [],
      multipleCrontabSelection: [],
      multipleDependenceSelection: [],
      currentJob: null,
      listLoading: false,
      conheight: {
        height: ''
      },
      consoleOn: false,
      textarea: '',
      defaultNewCrontab: {
        id: null,
        jobId: null,
        actionType: '0',
        schedulerType: '1',
        actionTime: null,
        izEnabled: '0',
        minute: '*',
        hour: '*',
        day: '*',
        weekday: '*',
        month: '0',
        runDuration: 180,
        name: '默认值,修改我吧',
        remark: '备注, 详细说明调度计划',
      },
    };
  },

  created() {
    this.callCfgJobList();
    window.addEventListener('resize', this.getHeight);
    this.getHeight();
  },

  methods: {
    createNewTabPanel(myCfgJob) {
      let idx = this.myJobList.findIndex(item => { return item.id == myCfgJob.id });
      if (idx >= 0) {
        this.editableTabsValue = '' + myCfgJob.id;
      } else {
        this.myJobList.push(myCfgJob);
        this.editableTabsValue = '' + myCfgJob.id;
      }
    },

    removeTab(targetName) {
      if ('-1' == targetName) {
        return;
      }

      let tabs = this.myJobList;
      let activeName = this.editableTabsValue;
      if (activeName == targetName) {
        tabs.forEach((tab, index) => {
          if ('' + tab.id == targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = '' + nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.myJobList = tabs.filter(tab => '' + tab.id != targetName);
      if (this.myJobList.length == 0) {
        this.editableTabsValue = '-1';
      }
    },

    hasPermission(url) {
      return hasPermission(url)
    },
    getOptions(dictKey) {
      return getEntries(dictKey);
    },

    getDictLabel(dictKey, dictValue) {
      return getLabel(dictKey, dictValue);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getHeight() {
      //this.myHeight = window.innerHeight - 100;
      this.conheight.height = window.innerHeight - 100 + 'px';
      //this.jobTableHeight = window.innerHeight - 100 - 140 + 'px';
    },

    checkCrontabEdit() {
      if (this.currentJob.monitorPlans == null || this.currentJob.monitorPlans.length == 0) {
        return false;
      }

      let idx = this.currentJob.monitorPlans.length - 1;
      if (this.currentJob.monitorPlans[idx].id == null) {
        return true;
      }

      return false;
    },

    handleSelectionChange(val) {
      this.multipleCrontabSelection = val;
    },

    handleDependenceSelectionChange(val) {
      this.multipleDependenceSelection = val;
    },

    gotoStep(activeStep) {
      if (activeStep == 0) {
        this.active = 0;
      } else if (activeStep == 1) {
        if (this.currentJob == null) {
          this.$message({
            type: 'warning',
            message: '请先选择你需要操作的作业',
            duration: 3000
          })
          return;
        }
        this.active = 1;
      } else if (activeStep == 2) {
        if (this.currentJob == null) {
          this.$message({
            type: 'warning',
            message: '请先选择你需要操作的作业',
            duration: 3000
          })
          return;
        }
        if (this.currentJob.taskProcesses == null) {
          this.$message({
            type: 'warning',
            message: '谨慎操作, 要先查看作业的任务记录情况',
            duration: 3000
          })
          return;
        }
        this.active = 2;
      }
    },

    callCfgJobList() {
      this.listLoading = true;
      apiJobList()
        .then(response => {
          this.$set(this, 'cfgJobList', []);
          this.$set(this, 'currentJob', null);
          this.listLoading = false;
          const data = response.data;
          console.log(data);
          if (data) {
            // https://vuejs.org/v2/guide/reactivity.html
            this.cfgJobList = data;

            this.listLoading = false;
          }
        });
      this.listLoading = false;
    }
  }
};
</script>

<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
